<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 */

get_header(); ?>
<div id="content">

	<div class="container">

		<div id="main">
			
			<div id="trips-viewer" class="box">

				<div id="featured-trips" class="tab-content" style="display: block; ">

					<div class="trips-container">

						<ul style="position: relative; width: 250px; height: 363px; ">

							<?php query_posts(array('cat'=>1,'posts_per_page' => 4,'post__in' => get_option('sticky_posts'),'caller_get_posts' => 1));?>
							<?php if(have_posts()):while(have_posts()):the_post(); ?>
							
							<li id="popular-slide-one" class="trip-content" style="position: absolute; top: 0px; left: 0px; width: 250px; height: 363px; z-index: 4; opacity: 0; display: none; ">

								<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark">
									<img src="<?php echo catch_that_image() ?>" width="242" height="88" alt="<?php the_title(); ?>">
									<h4 class="title"><?php the_title(); ?></h4>
								</a>
								<p class="meta"><?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>
							</li><!-- end #slide-one -->
						<?php endwhile;?>
						<?php else:?>
						<?php endif;wp_reset_query();?>
						</ul>

					</div><!-- end .trips-container -->

					<ul class="trips-nav">

						<!-- end .nav-button -->
							<?php query_posts(array('cat'=>1,'posts_per_page' => 4,'post__in' => get_option('sticky_posts'),'caller_get_posts' => 1));?>
							<?php if(have_posts()):while(have_posts()):the_post(); ?>
							

						<li class="nav-button">
							<div class="content clearfix">
								<a href="<?php the_permalink(); ?>" class="title" title="<?php the_title(); ?>" rel="bookmark">
									<img src="<?php echo catch_that_image() ?>" width="60" height="60" alt="">
									<h6><?php the_title(); ?></h6>
								</a>
								<p class="meta"><?php the_author_posts_link(); ?>  发布于 <strong> <?php if (function_exists('time_since')) {
echo time_since(abs(strtotime($post->post_date_gmt . "GMT")), time()) ;
} else {
the_time('F jS, Y');
} ?></strong></p>
								<ul class="links">
									<li><a href="#">122 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">9 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">Read More...</a></li>
								</ul>
							</div><!-- end .content -->
						</li>
						<?php endwhile;?>
						<?php else:?>
						<?php endif;wp_reset_query();?>
						</ul><!-- end .trips-nav -->

				</div><!-- end #featured-trips -->

				<div id="popular-trips" class="tab-content" style="display: none; ">

					<div class="trips-container">

						<ul style="position: relative; width: 250px; height: 363px; ">

							<li id="popular-slide-one" class="trip-content" style="position: absolute; top: 0px; left: 0px; width: 250px; height: 363px; z-index: 4; opacity: 0; display: none; ">

								<a href="http://demo.knarsku.com/travelguide/single-post.html">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-4.jpg" width="242" height="88" alt="">
									<h4 class="title">Keep Off: Beach Attention Table</h4>
								</a>
								<p class="meta">Published on <a href="#">March 18, 2010</a> by <a href="#">John Doe</a></p>

								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <a href="#">unknown printer took</a> a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic. </p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>

							</li><!-- end #slide-one -->

							<li id="popular-slide-two" class="trip-content" style="position: absolute; z-index: 5; top: 0px; left: 0px; display: block; width: 250px; height: 363px; opacity: 1; ">

								<a href="http://demo.knarsku.com/travelguide/single-post.html">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-2.jpg" width="242" height="88" alt="">
									<h4 class="title">Abroad Trip: Australian Rocks</h4>
								</a>
								<p class="meta">Published on <a href="#">March 08, 2010</a> by <a href="#">John Doe</a></p>

								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <a href="#">unknown printer took</a> a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>

							</li><!-- end #slide-two -->

							<li id="popular-slide-three" class="trip-content" style="position: absolute; top: 0px; left: 0px; width: 250px; height: 363px; z-index: 4; opacity: 0; display: none; ">

								<a href="http://demo.knarsku.com/travelguide/single-post.html">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-1.jpg" width="242" height="88" alt="">
									<h4 class="title">Palmtree Wind Photo from Miami Beach, Florida</h4>
								</a>
								<p class="meta">Published on <a href="#">March 21, 2010</a> by <a href="#">John Doe</a></p>

								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <a href="#">unknown printer took</a> a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>

							</li><!-- end #slide-three -->

							<li id="popular-slide-four" class="trip-content" style="position: absolute; top: 0px; left: 0px; width: 250px; height: 363px; z-index: 4; opacity: 0; display: none; ">

								<a href="http://demo.knarsku.com/travelguide/single-post.html">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-3.jpg" width="242" height="88" alt="">
									<h4 class="title">Museum: Native American Style Box</h4>
								</a>
								<p class="meta">Published on <a href="#">March 16, 2010</a> by <a href="#">John Doe</a></p>

								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <a href="#">unknown printer took</a> a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>

							</li><!-- end #slide-four -->

						</ul>
					</div><!-- end .trips-container -->
					<ul class="trips-nav">
					<li class="nav-button">
							<div class="content">
								<a href="#popular-slide-one" class="title">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-nav-4.jpg" width="60" height="60" alt="">
									<h6>Keep Off: Beach Attention Table</h6>
								</a>
								<p class="meta">Published on <a href="#">March 18, 2010</a> by <a href="#">John Doe</a></p>
								<ul class="links">
									<li><a href="#">34 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">14 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">继续阅读</a></li>
								</ul>
							</div><!-- end .content -->
						</li><li class="nav-button activeSlide">
							<div class="content">
								<a href="#popular-slide-two" class="title">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-nav-2.jpg" width="60" height="60" alt="">
									<h6>Abroad Trip: Australian Rocks</h6>
								</a>
								<p class="meta">Published on <a href="#">March 08, 2010</a> by <a href="#">John Doe</a></p>
								<ul class="links">
									<li><a href="#">56 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">7 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">继续阅读</a></li>
								</ul>
							</div><!-- end .content -->
						</li><li class="nav-button">
							<div class="content">
								<a href="#popular-slide-three" class="title">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-nav-1.jpg" width="60" height="60" alt="">
									<h6>Palmtree Wind Photo from Miami, Florida</h6>
								</a>
								<p class="meta">Published on <a href="#">March 21, 2010</a> by <a href="#">John Doe</a></p>
								<ul class="links">
									<li><a href="#">122 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">9 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">继续阅读</a></li>
								</ul>
							</div><!-- end .content -->
						</li><li class="nav-button">
							<div class="content">
								<a href="#popular-slide-four" class="title">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-nav-3.jpg" width="60" height="60" alt="">
									<h6>Museum: Native American Style Box</h6>
								</a>
								<p class="meta">Published on <a href="#">March 16, 2010</a> by <a href="#">John Doe</a></p>
								<ul class="links">
									<li><a href="#">64 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">2 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">继续阅读</a></li>
								</ul>
							</div><!-- end .content -->
						</li></ul><!-- end .trips-nav -->
				</div><!-- end #popular-trips -->
				<div id="most-viewed-trips" class="tab-content" style="display: none; ">

					<div class="trips-container">

						<ul style="position: relative; width: 250px; height: 363px; ">

							<li id="most-viewed-slide-one" class="trip-content" style="position: absolute; top: 0px; left: 0px; width: 250px; height: 363px; z-index: 4; opacity: 0; display: none; ">

								<a href="http://demo.knarsku.com/travelguide/single-post.html">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-2.jpg" width="242" height="88" alt="">
									<h4 class="title">Abroad Trip: Australian Rocks</h4>
								</a>
								<p class="meta">Published on <a href="#">March 08, 2010</a> by <a href="#">John Doe</a></p>

								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <a href="#">unknown printer took</a> a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>

							</li><!-- end #slide-one -->

							<li id="most-viewed-slide-two" class="trip-content" style="position: absolute; z-index: 5; top: 0px; left: 0px; display: block; width: 250px; height: 363px; opacity: 1; ">

								<a href="http://demo.knarsku.com/travelguide/single-post.html">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-3.jpg" width="242" height="88" alt="">
									<h4 class="title">Museum: Native American Style Box</h4>
								</a>
								<p class="meta">Published on <a href="#">March 16, 2010</a> by <a href="#">John Doe</a></p>

								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <a href="#">unknown printer took</a> a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>

							</li><!-- end #slide-two -->

							<li id="most-viewed-slide-three" class="trip-content" style="position: absolute; top: 0px; left: 0px; width: 250px; height: 363px; z-index: 4; opacity: 0; display: none; ">

								<a href="http://demo.knarsku.com/travelguide/single-post.html">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-4.jpg" width="242" height="88" alt="">
									<h4 class="title">Keep Off: Beach Attention Table</h4>
								</a>
								<p class="meta">Published on <a href="#">March 18, 2010</a> by <a href="#">John Doe</a></p>

								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <a href="#">unknown printer took</a> a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic. </p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>

							</li><!-- end #slide-three -->

							<li id="most-viewed-slide-four" class="trip-content" style="position: absolute; top: 0px; left: 0px; width: 250px; height: 363px; z-index: 4; opacity: 0; display: none; ">

								<a href="http://demo.knarsku.com/travelguide/single-post.html">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-1.jpg" width="242" height="88" alt="">
									<h4 class="title">Palmtree Wind Photo from Miami Beach, Florida</h4>
								</a>
								<p class="meta">Published on <a href="#">March 21, 2010</a> by <a href="#">John Doe</a></p>

								<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an <a href="#">unknown printer took</a> a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>

								<a href="#" class="sent-to-friend">Sent to a Friend</a>
								<a class="button" href="http://demo.knarsku.com/travelguide/single-post.html">继续阅读</a>

							</li><!-- end #slide-four -->
						</ul>
					</div><!-- end .trips-container -->
					<ul class="trips-nav">
					<li class="nav-button">
							<div class="content">
								<a href="#most-viewed-slide-one" class="title">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-nav-2.jpg" width="60" height="60" alt="">
									<h6>Abroad Trip: Australian Rocks</h6>
								</a>
								<p class="meta">Published on <a href="#">March 08, 2010</a> by <a href="#">John Doe</a></p>
								<ul class="links">
									<li><a href="#">56 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">7 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">继续阅读</a></li>
								</ul>
							</div><!-- end .content -->
						</li><li class="nav-button activeSlide">
							<div class="content">
								<a href="#most-viewed-slide-two" class="title">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-nav-3.jpg" width="60" height="60" alt="">
									<h6>Museum: Native American Style Box</h6>
								</a>
								<p class="meta">Published on <a href="#">March 16, 2010</a> by <a href="#">John Doe</a></p>
								<ul class="links">
									<li><a href="#">64 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">2 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">继续阅读</a></li>
								</ul>
							</div><!-- end .content -->
						</li><li class="nav-button">
							<div class="content">
								<a href="#most-viewed-slide-three" class="title">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-nav-4.jpg" width="60" height="60" alt="">
									<h6>Keep Off: Beach Attention Table</h6>
								</a>
								<p class="meta">Published on <a href="#">March 18, 2010</a> by <a href="#">John Doe</a></p>
								<ul class="links">
									<li><a href="#">34 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">14 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">继续阅读</a></li>
								</ul>
							</div><!-- end .content -->
						</li><li class="nav-button">
							<div class="content">
								<a href="#most-viewed-slide-four" class="title">
									<img src="<?php bloginfo('template_directory'); ?>/images/trips-viewer-nav-1.jpg" width="60" height="60" alt="">
									<h6>Palmtree Wind Photo from Miami, Florida</h6>
								</a>
								<p class="meta">Published on <a href="#">March 21, 2010</a> by <a href="#">John Doe</a></p>
								<ul class="links">
									<li><a href="#">122 Comments</a> <span class="separator">|</span></li>
									<li><a href="#">9 Tweets</a> <span class="separator">|</span></li>
									<li><a href="#">继续阅读</a></li>
								</ul>
							</div><!-- end .content -->
						</li></ul><!-- end .trips-nav -->
				</div><!-- end #most-viewed-trips -->
			</div><!-- end #trips-viewer -->
			<?php if ( have_posts() ) : query_posts(array("post__not_in" =>get_option("sticky_posts"))); ?>
				<?php /* Start the Loop */ ?>
				<?php while ( have_posts() ) : the_post(); ?>
					<?php get_template_part( 'content', get_post_format() ); ?>
				<?php endwhile; ?>
				<?php else : ?>
					<h2 class="title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h2>
					<p class="meta">Published on <a href="#">December 3, 2010</a> by <a href="#">John Doe</a></p>
					<a href="http://demo.knarsku.com/travelguide/single-post.html" class="button">继续阅读</a>
				</div><!-- end .entry-header -->
				<div class="entry-content">
					<a href="http://demo.knarsku.com/travelguide/single-post.html"><img src="<?php bloginfo('template_directory'); ?>/images/single-1.jpg" width="240" height="140" alt="" class="entry-image"></a>
						<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
						<?php get_search_form(); ?>
					<hr>
					<ul class="entry-links">
						<li><a href="#">Send to a Friend</a> <span class="separator">|</span></li>
						<li><a href="#">Share this Post</a> <span class="separator">|</span></li>
						<li><a href="#">41 Comments</a> <span class="separator">|</span></li>
						<li><a href="#">0 Tweets</a></li>
					</ul>
				<?php endif; ?>
			<?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?>
		</div><!-- end #main -->
		<?php get_sidebar(); ?>
		<div class="clear"></div>
	</div><!-- end .container -->
</div><!-- end #content -->	
<?php get_footer(); ?>